<template>
  <div class="address">
    <div class="addTop">
      <span @click="goBack" class="iconfont">&#xe697;</span>
      <span> {{ title }}收获地址</span>
      <span @click="onSaveAddress">保存</span>
    </div>

    <div class="wrapper">
      <div class="city df">
        <p class="city__txt">所在城市:</p>
        <input
          class="city__inp"
          placeholder="如北京市"
          placeholder-class="inputPlaceholder"
          v-model="addDetail.city"
          type="text"
        />
      </div>
      <div class="community df">
        <p class="community__txt">小区/大厦/学校：</p>
        <input
          class="community__inp"
          placeholder="如理工大学国防科技园"
          placeholder-class="inputPlaceholder"
          v-model="addDetail.department"
          type="text"
        />
      </div>
      <div class="building df">
        <p class="building__txt">楼号-门牌号：</p>
        <input
          class="building__inp"
          placeholder="A号楼B层"
          placeholder-class="inputPlaceholder"
          v-model="addDetail.houseNumber"
          type="text"
        />
      </div>
      <div class="receiver df">
        <p class="receiver__txt">收货人：</p>
        <input
          class="receiver__inp"
          placeholder="请填写收货人的姓名"
          placeholder-class="inputPlaceholder"
          v-model="addDetail.name"
          type="text"
        />
      </div>
      <div class="phone df">
        <p class="phone__txt">联系电话：</p>
        <input
          class="phone__inp"
          placeholder="请填写收货人的姓名"
          placeholder-class="inputPlaceholder"
          v-model="addDetail.phone"
          type="text"
        />
      </div>
    </div>
  </div>
  <Toast v-if="toastData.isShow" :msg="toastData.msg" />
</template>

<script>
import { useRoute, useRouter } from "vue-router";
import { ref, reactive, computed } from "vue";
import Toast, { toastEffect } from "@/components/Toast";
import { post, get } from "@/API/axios.js";
//请求数据

const useAddressAPI = (router, showToast, addId) => {
  //地址数据相关
  const addDetail = reactive({
    city: "",
    department: "",
    houseNumber: "",
    name: "",
    phone: "",
  });
  const saveData = async () => {
    const res = await post("/api/user/address", {
      city: addDetail.city,
      department: addDetail.department,
      houseNumber: addDetail.houseNumber,
      name: addDetail.name,
      phone: addDetail.phone,
    });
    if (res.errno === 0) {
      router.back();
    } else {
      showToast(String(res.message));
    }
  };

  const saveEditData = async () => {
    const res = await post(`/api/user/address/${addId}`, {
      city: addDetail.city,
      department: addDetail.department,
      houseNumber: addDetail.houseNumber,
      name: addDetail.name,
      phone: addDetail.phone,
    });
    if (res.errno === 0) {
      router.back();
    } else {
      showToast(String(res.message));
    }
  };

  const getData = async () => {
    const res = await get(`/api/user/address/${addId}`);
    if (res.errno === 0) {
      let info = res.data;
      addDetail.city = info.city;
      addDetail.department = info.department;
      addDetail.houseNumber = info.houseNumber;
      addDetail.name = info.name;
      addDetail.phone = info.phone;
    } else {
      showToast(String(res.message));
    }
  };

  return { addDetail, getData, saveData, saveEditData };
};

export default {
  name: "addressedit",
  components: { Toast },
  setup() {
    //返回上一层
    const router = useRouter();
    const goBack = () => {
      router.back();
    };
    //路由参数
    const route = useRoute();
    const addId = route.query.addId;

    //判断是否为编辑模式
    let isEdit = addId ? true : false;
    const title = computed(() => {
      let name = isEdit ? "编辑" : "新建";
      return name;
    });

    //Toast相关
    const { toastData, showToast } = toastEffect();
    //请求数据相关
    const { addDetail, getData, saveData, saveEditData } = useAddressAPI(
      router,
      showToast,
      addId
    );
    //保存地址
    const onSaveAddress = () => {
      if (
        !addDetail.city ||
        !addDetail.department ||
        !addDetail.houseNumber ||
        !addDetail.name ||
        !addDetail.phone
      ) {
        showToast("请填写完整信息");
        return;
      }
      if (isEdit) {
        saveEditData();
      } else {
        saveData();
      }
    };

    //编辑模式启动
    if (isEdit) {
      getData();
    }

    return { title, goBack, addDetail, toastData, showToast, onSaveAddress };
  },
};
</script>

<style lang="scss" scoped>
@import "@/styles/variables.scss";
.address {
  height: 100vh;
  width: 100%;
  background-color: $searchBgc-color;
}

.wrapper {
  background-color: $white-color;
}

.addTop {
  box-sizing: border-box;
  height: 0.45rem;
  width: 100%;
  text-align: center;
  line-height: 0.45rem;
  font-size: 0.16rem;
  color: $content-color;
  background-color: $white-color;
  margin-bottom: 0.12rem;
  padding: 0 0.12rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.df {
  display: flex;
  justify-content: start;
  align-items: center;
  height: 0.45rem;
  background-color: $white-color;
  font-size: 0.15rem;
  color: $medium-font-color;
  line-height: 0.45rem;
  border-bottom: solid 0.01rem #f1f1f1;
  input {
    outline: none;
    border: none;
    margin-left: 0.06rem;
    color: $medium-font-color;
  }
  .inputPlaceholder {
    font-size: 0.14rem;
    color: $light-font-color;
    line-height: 0.2rem;
  }
}
</style>
